<template>
    <div class="top">
        <span v-if="!name">
             <span><a style="color: #ffffff" href="#/login">會員登錄</a></span>
            <span>|</span>
            <span><a style="color: #ffffff" href="#/kandeng">品牌刊登</a></span>
            <span>|</span>
            <span><a style="color: #ffffff" href="#/register">加入會員</a></span>
        </span>
        <span v-else>
             <span>welcome <a href="#/user">{{name}}</a></span>
            <span>|</span>
            <span><a style="color: #ffffff" href="#/kandeng">品牌刊登</a></span>
            <span>|</span>
            <span><a @click="clearCookie">退出登錄</a></span>
        </span>

    </div>
</template>

<script>
  import utils from "../common/utils"
    export default {
        name: "common-top",
        data() {
            return {
                name:""
            }
        },
        mounted() {
            // this.login = sessionStorage.getItem("kaidian+login");
          this.name =utils.getCookie("kd_user_name")
        },
      methods:{
        clearCookie() {
            this.$http({
              url:this.API.user_logout,
              method:"get"
            }).then((res) => {
              window.location.reload()
            })
        }
      }
    }
</script>

<style scoped lang="less">
    a{
        color: #ffffff;
    }
    .top{
        height:50px;
        width: 100%;
        line-height: 50px;
        background-color: #333333;
        text-align: right;
        color: #ffffff;
        font-size: 16px !important;
        span{
            margin-left: 5px;
            margin-right: 5px;
            &:last-child{
                margin-right: 25px;
            }
            &:nth-child(2n-1){
                /*cursor: pointer;*/
                /*&:hover{*/
                    /*color: gray;*/
                /*}*/
            }
        }
    }
</style>